<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <title th:text="#{cas.oauth.confirm.pagetitle}"></title>
</head>

<body id="cas">
<div class="mdc-card p-4 m-auto w-lg-66" layout:fragment="content">
    <h2 th:text="#{cas.oauth.device.confirm.header}"/>
    <p class="my-2" th:text="#{cas.oauth.device.confirm.message}"/>
    <div class="banner banner-danger my-2" th:if="${error}">
        <a aria-label="close" class="close" data-dismiss="alert" href="#">&times;</a>
        <span th:utext="#{${'cas.oauth.device.error.' + error}}"/>
    </div>
    <form id="fm1" method="post">
        <div class="cas-field my-3 mdc-input-group">
            <div class="mdc-input-group-field mdc-input-group-field-append">
                <div class="mdc-text-field  mdc-text-field--with-trailing-icon d-flex caps-check">
                    <input aria-describedby="code-prefix" aria-label="UserCode" autocomplete="off"
                           class="mdc-text-field__input pwd"
                           id="usercode" name="usercode" placeholder="code..." size="25"
                           type="password"/>
                    <label class="mdc-floating-label" for="username">Code:</label>
                    <i class="mdi mdi-alert mdc-text-field__icon text-danger caps-warn"></i>
                </div>
            </div>
            <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button"
                    type="button">
                <i class="mdi mdi-eye reveal-password-icon"></i>
                <span class="sr-only">Toggle Password</span>
            </button>
        </div>
        <input class="mdc-button mdc-button--raised" name="submit" th:value="#{screen.oauth.confirm.allow}"
               type="submit" value="Allow"/>
    </form>
</div>
</body>

</html>